<template>
    <article>
        <header>选择框</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-select c="select default medium distant" :options="options" searchable v-model="value" @input="search"></cv-select>
                <cv-select c="select primary medium distant" :options="options">
                    <template v-slot:default="scope">
                        <div>Hello, {{scope.option.text}}</div>
                    </template>
                </cv-select>
                <cv-select c="select success medium distant" :options="options" v-model="value" :valueKey="getOptionValue()"></cv-select>
                <cv-select c="select warn medium distant" :options="options"></cv-select>
                <cv-select c="select error medium distant" :options="options"></cv-select>
            </div>
        </section>
        <section>
            <header>大小</header>
            <div>
                <cv-select c="select primary large distant" :options="options"></cv-select>
                <cv-select c="select primary medium distant" :options="options"></cv-select>
                <cv-select c="select primary small distant" :options="options"></cv-select>
                <cv-select c="select primary mini distant" :options="options"></cv-select>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleSelect",
        data() {
            return {
                options: {
                    foo: "foo",
                    bar: "bar"
                },
                nextId: 0,
                value: "bar"
            };
        },
        methods: {
            getOptionValue() {
                return {
                    toValue: option => option
                };
            },
            search(e) {
                let keyword = e.target.value;
                console.info(keyword);
                this.options = [{
                    id: this.nextId++,
                    name: keyword + 0
                },{
                    id: this.nextId++,
                    name: keyword + 1
                },{
                    id: this.nextId++,
                    name: keyword + 2
                },{
                    id: this.nextId++,
                    name: keyword + 3
                }];
            }
        }
    }
</script>

<style scoped>
</style>
